<template>
  <j-modal
    :confirmLoading="confirmLoading"
    :maskClosable="false"
    :visible="visible"
    :width="1400"
    switchFullscreen
    title="财务开票收费-购车款（为必填项）"
    @cancel="close"
  >
    <template slot="footer">
      <a-button key="submit" :disabled="notReadySubmit" :loading="confirmLoading" type="primary" @click="handleOk2">
        提交
      </a-button>

    </template>
    <div class="left-cent">
      <a-spin :spinning="confirmLoading">
        <!-- 主表单区域 -->
        <a-form-model ref="ruleForm"
                      :label-col="labelCol"
                      :model="model"
                      :rules="rules" :wrapper-col="wrapperCol">
          <a-form-model-item label="关键字" prop="keyword">
            <a-input
              v-model="model.keyword" placeholder="姓名/手机号" style="margin-left: 10px"
            />
          </a-form-model-item>
          <a-button icon="search" type="primary" @click="querylsit">查询</a-button>
        </a-form-model>
      </a-spin>
      <div>购车人列表信息</div>
      <div class="listinfor">
        <a-table
          ref="table"
          :columns="columns1"
          :dataSource="datas"
          :loading="loading"
          bordered
          size="middle"
          @change="handleTableChange"
        >
          <span slot="operation" slot-scope="text, record">
            <a-button type="primary" @click="getFee(record)">选择</a-button>
          </span>
        </a-table>
        <!--<a-pagination v-model="current" @change="onChangepage" :total="zsl" show-less-items />-->
      </div>
    </div>
    <div class="right-cent">
      <div>应缴费用明细</div>
      <div class="mx-top">
        <div>
          <a-table :columns="columns" :data-source="datas2" :pagination="pag"
                   :row-selection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
                   bordered
                   rowKey="id">
          </a-table>
        </div>
      </div>
      <div class="mx-top2">
        <div>已支付</div>
        <div>
          <a-table :columns="columns2" :data-source="datas3" :pagination="pag" bordered>
          </a-table>
        </div>
      </div>
      <div class="mx-center">
        <div class="let">
          <div>购车人(单位)：</div>
          <div>{{ lat.name }}</div>
        </div>
        <div class="cent" style="margin-left: 30px">
          <div>待支付笔数：</div>
          <div>{{ lat.bis }}</div>
        </div>
        <div v-if="lat.deducteDeposit" class="rig">
          <div>抵扣定金：</div>
          <div style="color: red">{{ lat.deducteDeposit }}</div>
        </div>
      </div>
      <div class="mx-bot">
        <div>缴费登记(元)</div>
        <div class="mx-infor">
          <div class="let">
            <div>缴费人：</div>
            <div>{{ lat.name }}</div>
          </div>
          <div class="cent">
            <div>选定笔数：</div>
            <div>{{ lat.selectedFees }}</div>
          </div>
          <div class="rig">
            <div class="tit">本次实缴：</div>
            <div>{{ this.amounts }}</div>
          </div>
        </div>
        <div class="bzinfor">
          <div class="tit">备注：</div>
          <a-textarea v-model="remarks" :rows="4"/>
        </div>
        <div class="payment">
          <div class="pay-let">
            <div style="margin-top: 5px">
              <span style="color: red">*</span>
              付款方式
            </div>
            <a-select placeholder="请选择支付方式"
                      @change="changeDepositNotes"
            >
              <a-select-option value="1">京东白条</a-select-option>
              <a-select-option value="2">微信</a-select-option>
              <a-select-option value="3">支付宝</a-select-option>
              <a-select-option value="4">云闪付</a-select-option>
              <a-select-option value="5">现金</a-select-option>
              <a-select-option value="6">电汇</a-select-option>
              <a-select-option value="7">转账</a-select-option>
            </a-select>
          </div>
          <div v-if="datas3.length !== 0 && depositOver == false" class="pay-cen" style="margin-left: 10px;">
            <a-checkbox :checked="checked" @click="toggleChecked">
              抵扣定金
            </a-checkbox>
          </div>
          <div class="pay-but">
            <a-button :disabled="notReadySubmit" hape="round" type="primary" @click="next">查看表格</a-button>
            <a-modal
              :confirm-loading="confirmLoadinginfor"
              :visible="lastvisible"
              :width="800"
              okText="保存"
              title="财务开票收费-购车款（为必填项）"
            >
              <template slot="footer">
                <a-button type="primary" @click="handleCancel2">
                  返回
                </a-button>
              </template>
              <!--              <div class="top-tit">-->
              <!--                <div class="lket">-->
              <!--                  <div>收款单位：</div>-->
              <!--                  <div></div>-->
              <!--                </div>-->
              <!--                <div class="lkgh">-->
              <!--                  <div>收据编号：</div>-->
              <!--                  <div></div>-->
              <!--                </div>-->
              <!--              </div>-->
              <div class="bg">
                <tr class="da">
                  <td>收款人</td>
                  <td colspan="2">{{ lat.name }}</td>
                  <td>客户订单号码</td>
                  <td colspan="2">{{ lat.orderId }}</td>
                </tr>
                <tr>
                  <td colspan="3">费用名称</td>
                  <td colspan="3">缴款金额</td>
                </tr>
                <tr>
                  <td colspan="3">{{ lat.expenseName }}</td>
                  <td colspan="3">{{ this.amounts }}</td>
                </tr>
                <tr class="da">
                  <td colspan="2">缴款金额(大写)</td>
                  <td colspan="4">{{ manys }}</td>
                </tr>
                <tr class="at">
                  <td>备注:</td>
                  <td>{{ remarks }}</td>
                  <td>车辆识别代号</td>
                  <td>LBASDASD56165164</td>
                  <td>付款方式</td>
                  <td>{{ lucy }}</td>
                </tr>
              </div>
              <div class="last-tit" style="width: 100%">
                <div style="flex: 1;margin-top: 50px;">收款日期：{{ Day }}</div>
                <div style="margin: 50px 50px 0 0">开票人：系统管理员</div>
              </div>
            </a-modal>
          </div>
        </div>
      </div>
    </div>
    <!--<a-button type="primary" @click="saveDraft">暂存</a-button>-->
  </j-modal>
</template>

<script>
import { getAction, httpAction, postAction } from '@/api/manage'

export default {
  name: 'CarPurchasePrice',
  data() {
    return {
      // title: '财务开票收费-购车款（为必填项）',
      checked: true,
      depositLeft: 0,
      depositOver: true,
      notReadySubmit: true,
      selectedRowKeys: [],
      selectedRows: [],
      visible: false,
      model: {},
      rules:
        {
          //车管验证条件
          gjz: [{ required: true, message: '请输入关键字', trigger: 'blur' }]
        },
      id: '',
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      loading: false,
      pag: false,
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      lastvisible: false,
      confirmLoadinginfor: false,
      confirmLoading: false,
      form: this.$form.createForm(this),
      showDing: false,
      showEnterpriseUscc: false,
      datas2: [],
      datas: [],
      datas3: [],
      current: 1,
      zsl: 80,
      pages: {
        pageNo: '1',
        pageSize: '10'
      },
      amounts: '',
      lat: {
        name: '',
        amount: '',
        bis: 0,
        selectedFees: 0,
        expenseName: '',
        orderId: ''
      },
      columns1: [
        {
          title: '操作',
          dataIndex: 'operation',
          align: 'center',
          width: 120,
          scopedSlots: {
            customRender: 'operation'
          }
        },
        {
          title: '序号',
          dataIndex: 'key',
          align: 'center'
        },
        {
          title: '购车人(单位)',
          dataIndex: 'name',
          align: 'center'
        },
        {
          title: '手机号',
          dataIndex: 'mobile',
          align: 'center'
        }
      ],
      columns: [
        {
          title: '序号',
          dataIndex: 'key'
        },
        {
          title: '购车人(单位)',
          dataIndex: 'name'
        },
        {
          title: '手机号',
          dataIndex: 'mobile'
        },
        {
          title: '费用名称',
          dataIndex: 'expenseName'
        },
        {
          title: '应付金额(元)',
          dataIndex: 'payableAmount'
        }
      ],
      columns2: [
        {
          title: '序号',
          dataIndex: 'key'
        },
        {
          title: '购车人(单位)',
          dataIndex: 'name'
        },
        {
          title: '手机号',
          dataIndex: 'mobile'
        },
        {
          title: '费用名称',
          dataIndex: 'expenseName'
        },
        {
          title: '已缴金额(元)',
          dataIndex: 'amount'
        },
        {
          title: '抵扣金额(元)',
          dataIndex: 'deducteDeposit'
        },
      ],
      payType: '京东白条',
      value: '',
      remarks: '',
      lucy: '',
      manys: '',
      Day: '',
      page: false,
      url: {
        list: '/sale/cxmSaleOrderInfo/queryUnpaidOrder',
        querylist: '/sale/cxmSaleOrderInfo/searchUnpaidOrder',
        addok: '/sale/cxmSaleReceipt/payReceipts',
        changeid: '/sale/cxmSaleReceipt/queryReceipts'
      }
    }
  },
  watch: {
    'lat.bis'(newVal) {
      console.log('newVal:', newVal)
    },
    watchSubmitStatus(val) {
      if (val.selectedRows.length !== 0 && val.lucy) {
        this.notReadySubmit = false
      }
    }
  },
  created() {
  },
  computed: {
    watchSubmitStatus() {
      const { selectedRows, lucy } = this
      return {
        selectedRows,
        lucy
      }
    }
  },
  methods: {
    onSelectChange(selectedRowKeys, selectedRows) {
      this.amounts = 0
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
      if (selectedRows.length != 0) {
        console.log(selectedRows.length)
        this.lat.name = selectedRows[0].name
        this.lat.deducteDeposit = selectedRows[0].deducteDeposit
        for (let i in selectedRows) {
          this.amounts += selectedRows[i].payableAmount
        }
        for (let k in this.datas3) {
          if (this.datas3[k].expenseName == '订金' && this.checked == true) {
            this.amounts = this.amounts - this.depositLeft
            if (this.amounts < 0) {
              this.amounts = 0
            }
          }
        }
        this.lat.selectedFees = selectedRows.length
        this.lat.expenseName = selectedRows[0].expenseName
        this.lat.orderId = selectedRows[0].orderId
        this.lat.items = selectedRows
      } else if (selectedRows.length == 0) {
        this.lat.name = null
        this.lat.deducteDeposit = null
        this.amounts = null
        this.lat.selectedFees = 0
        this.lat.expenseName = null
        this.lat.orderId = null
        this.lat.id = null
        this.lat.items = null
      }
      // else {
      //   this.lat.name = selectedRows[0].name
      //   this.lat.deducteDeposit = selectedRows[0].deducteDeposit + selectedRows[1].deducteDeposit
      //   this.amounts = selectedRows[0].payableAmount + selectedRows[1].payableAmount
      //   this.lat.bis = '1'
      //   this.lat.expenseName = selectedRows[0].expenseName + ',' + selectedRows[1].expenseName
      //   this.lat.orderId = selectedRows[0].orderId
      //   this.lat.items = selectedRows
      // }
    },
    // onChangepage(page, pageSize) {
    //   console.log(page, pageSize)
    //   let pagejson = {
    //     pageNo: page,
    //     pageSize: pageSize
    //   }
    //   this.getPrcingNum(pagejson)
    // },
    toggleChecked() {
      this.checked = !this.checked
      for (let k in this.datas3) {
        if (this.datas3[k].expenseName == '订金' && this.checked == true) {
          this.amounts = this.amounts - this.depositLeft
        } else if (this.datas3[k].expenseName == '订金' && this.checked == false) {
          this.amounts = this.amounts + this.depositLeft
        }
      }
    },
    getFee(record) {
      this.amounts = 0
      this.lat.selectedFees = 0
      this.selectedRowKeys = []
      this.selectedRows = []
      getAction(this.url.changeid + '?orderId=' + record.orderId)
        .then((res) => {
          if (res.success) {
            console.log(res.result)
            if (this.datas2) {
              this.datas2 = []
              res.result.unpaid.forEach((item, index) => {
                if (item.expenseName == 'deposit') {
                  item.expenseName = '订金'
                } else if (item.expenseName == 'price') {
                  item.expenseName = '车辆价格'
                } else if (item.expenseName == 'otherFees') {
                  item.expenseName = '代办服务费'
                }
                this.datas2.push({
                  key: index + 1,
                  name: record.name,
                  orderId: item.orderId,
                  expenseName: item.expenseName,
                  mobile: record.mobile,
                  deducteDeposit: item.deducteDeposit, //是否抵扣
                  certNo: item.certNo,
                  payType: item.payType,
                  id: item.id,
                  payableAmount: item.payableAmount
                })
                this.lat.bis = index + 1
              })
              this.lat.name = record.name
            }
            if (this.datas3) {
              this.datas3 = []
              let deposit = 0
              res.result.paid.forEach((item, index) => {
                if (item.expenseName == 'deposit') {
                  item.expenseName = '订金'
                  this.depositOver = false
                  deposit += item.payableAmount
                } else if (item.expenseName == 'price') {
                  item.expenseName = '车辆价格'
                  deposit = deposit - item.deducteDeposit
                } else if (item.expenseName == 'otherFees') {
                  item.expenseName = '代办服务费'
                  deposit = deposit - item.deducteDeposit
                }
                if (deposit == 0) {
                  this.depositOver = true
                }
                this.depositLeft = deposit

                this.datas3.push({
                  key: index + 1,
                  name: record.name,
                  orderId: item.orderId,
                  expenseName: item.expenseName,
                  mobile: record.mobile,
                  deducteDeposit: item.deducteDeposit, //是否抵扣
                  certNo: item.certNo,
                  payType: item.payType,
                  id: item.id,
                  payableAmount: item.payableAmount,
                  amount: item.amount
                })
              })
            }
          } else {
            this.$message.warning(res.message)
          }
        })
    },
    zhrmb(money) {
      if (money) {
        var cnNums = new Array('零', '壹', '贰', '叁', '肆', '伍', '陆', '柒', '捌', '玖') //汉字的数字
        var cnIntRadice = new Array('', '拾', '佰', '仟') //基本单位
        var cnIntUnits = new Array('', '万', '亿', '兆') //对应整数部分扩展单位
        var cnDecUnits = new Array('角', '分', '毫', '厘') //对应小数部分单位
        var cnInteger = '整' //整数金额时后面跟的字符
        var cnIntLast = '元' //整型完以后的单位
        var maxNum = 999999999999999.9999 //最大处理的数字
        var IntegerNum //金额整数部分
        var DecimalNum //金额小数部分
        var ChineseStr = '' //输出的中文金额字符串
        var parts //分离金额后用的数组，预定义
        var Symbol = ''//正负值标记
        if (money == '') {
          return ''
        }

        money = parseFloat(money)
        if (money >= maxNum) {
          alert('超出最大处理数字')
          return ''
        }
        if (money == 0) {
          ChineseStr = cnNums[0] + cnIntLast + cnInteger
          return ChineseStr
        }
        if (money < 0) {
          money = -money
          Symbol = '负 '
        }
        money = money.toString() //转换为字符串
        if (money.indexOf('.') == -1) {
          IntegerNum = money
          DecimalNum = ''
        } else {
          parts = money.split('.')
          IntegerNum = parts[0]
          DecimalNum = parts[1].substr(0, 4)
        }
        if (parseInt(IntegerNum, 10) > 0) { //获取整型部分转换
          var zeroCount = 0
          var IntLen = IntegerNum.length
          for (var i = 0; i < IntLen; i++) {
            var n = IntegerNum.substr(i, 1)
            var p = IntLen - i - 1
            var q = p / 4
            var m = p % 4
            if (n == '0') {
              zeroCount++
            } else {
              if (zeroCount > 0) {
                ChineseStr += cnNums[0]
              }
              zeroCount = 0 //归零
              ChineseStr += cnNums[parseInt(n)] + cnIntRadice[m]
            }
            if (m == 0 && zeroCount < 4) {
              ChineseStr += cnIntUnits[q]
            }
          }
          ChineseStr += cnIntLast
          //整型部分处理完毕
        }
        if (DecimalNum != '') { //小数部分
          var decLen = DecimalNum.length
          for (var i = 0; i < decLen; i++) {
            var n = DecimalNum.substr(i, 1)
            if (n != '0') {
              ChineseStr += cnNums[Number(n)] + cnDecUnits[i]
            }
          }
        }
        if (ChineseStr == '') {
          ChineseStr += cnNums[0] + cnIntLast + cnInteger
        } else if (DecimalNum == '') {
          ChineseStr += cnInteger
        }
        this.manys = Symbol + ChineseStr
      }
    },
    handleOk2() {
      let isDeductions
      if (this.lat.deducteDeposit == 0) {
        isDeductions = false
      } else {
        isDeductions = true
      }
      console.log(this.lat.items)
      let exarr = []

      this.lat.items.forEach((item, index) => {
        exarr.push(item.id)
      })
      let httpurl = this.url.addok + '?orderId=' + this.lat.orderId + '&payType=' + this.lucy + '&isDeduction=' + this.checked

      console.log(httpurl)
      // formData.date = formData.date ? formData.date.format('YYYY-MM-DD HH:mm:ss') : null
      postAction(httpurl, exarr)
        .then((res) => {
          if (res.success) {
            console.log(res.result)
            this.$message.success(res.message)
            this.$emit('ok')
          } else {
            this.$message.warning(res.message)
          }
        })
        .finally(() => {
          this.notReadySubmit = true
          this.datas2 = []
          this.datas3 = []
          this.lat = []
        })
      this.lastvisible = false
      this.visible = false
    },
    handleCancel2() {
      this.lastvisible = false
    },
    validate_Date2() {
      this.$refs['ruleForm'].validateField('date')
    },
    handleTableChange() {

    },
    querylsit() {
      const that = this
      this.$refs.ruleForm.validate(valid => {
        if (valid && this.model.keyword) {
          let httpurl = this.url.querylist
          let formData = Object.assign(this.model)
          // formData.date = formData.date ? formData.date.format('YYYY-MM-DD HH:mm:ss') : null
          getAction(httpurl, formData)
            .then((res) => {
              if (res.success) {
                console.log(res.result)
                if (this.datas) {
                  this.datas.length = 0
                  res.result.forEach((item, index) => {
                    this.datas.push({
                      key: index + 1,
                      name: item.name,
                      mobile: item.mobile,
                      certNo: item.certNo,
                      orderId: item.orderId
                    })
                  })
                }
              } else {
                that.$message.warning(res.message)
              }
            })
            .finally(() => {
              // that.close()
            })
        }
      })
    },
    changeDepositNotes(val, option) {
      // this.lucy = val
      this.lucy = option.componentOptions.children[0].text
      console.log(val, option.componentOptions.children[0].text)
    },
    onChange(checkedValues) {
      console.log('checked = ', checkedValues.target.checked)
    },
    next() {
      if (this.lat.name) {
        this.zhrmb(this.amounts)
        this.lastvisible = true
      }
    },
    offset() {

    },
    edit(record) {
      console.log(record)
      this.form.resetFields()
      this.model = Object.assign({}, record)
      console.log(this.model)
      this.getList()
      this.visible = true

    },
    close() {
      this.$emit('close')
      this.visible = false
    },
    handleOk() {
      const that = this
      // 触发表单验证
      this.form.validateFields((err, values) => {

        if (!err) {
          that.confirmLoading = true
          let httpurl = ''
          let method = ''
          if (!this.model.id) {
            httpurl += this.url.add

            method = 'post'
          } else {
            httpurl += this.url.edit
            method = 'put'
          }
          let formData = Object.assign(this.model, values)
          //时间格式化
          formData.orderDate = formData.orderDate ? formData.orderDate.format('YYYY-MM-DD HH:mm:ss') : null

          httpAction(httpurl, formData, method)
            .then((res) => {
              if (res.success) {
                that.$message.success(res.message)
                that.$emit('ok')
              } else {
                that.$message.warning(res.message)
              }
            })
            .finally(() => {
              that.confirmLoading = false
              that.close()
            })
        }
      })
    },
    saveDraft() {
      const that = this
      this.form.validateFields((err, values) => {
        let formData = Object.assign(this.model, values)
        //时间格式化
        formData.orderDate = formData.orderDate ? formData.orderDate.format('YYYY-MM-DD HH:mm:ss') : null
        let httpurl = this.url.saveDraft

        console.log(JSON.stringify(formData))
        let Data = {}
        Data.btype = 'order'
        Data.content = JSON.stringify(formData)
        console.log(Data)
        httpAction(httpurl, Data, 'post')
          .then((res) => {
            if (res.success) {
              that.$message.success(res.message)
              that.$emit('ok')
            } else {
              that.$message.warning(res.message)
            }
          })
          .finally(() => {
            that.confirmLoading = false
            that.close()
          })
      })

    },
    getList(pagejson) {
      let httpurl = this.url.list
      let formData = {}
      // if (pagejson) {
      //   formData = pagejson
      // } else {
      formData.pageNo = 1
      formData.pageSize = 10

      getAction(httpurl, formData)
        .then((res) => {
          if (res.success) {
            console.log(res.result)
            if (this.datas) {
              this.datas.length = 0
              res.result.forEach((item, index) => {
                this.datas.push({
                  key: index + 1,
                  name: item.name,
                  mobile: item.mobile,
                  certNo: item.certNo,
                  orderId: item.orderId
                })
              })
            }
          } else {
            this.$message.warning(res.message)
          }
        })
        .finally(() => {
          // that.close()
        })
    },
    handleCancel() {
      this.close()
    }
  },
  mounted() {
    var myDate = new Date()
    this.Day = myDate.toLocaleDateString() //获取当前日期
    console.log(this.Day)
  }
}
</script>

<style lang="less" scoped>
/deep/ .ant-modal {
  width: 1300px;
}

/deep/ .ant-modal-body {
  display: flex;
  lex-wrap: wrap;
  position: relative;

  .top-tit {
    position: absolute;
    top: 0;
    display: flex;
    justify-content: space-between;

    .lket {
      flex: 1;
    }

    .lkgh {
      flex: 1;
    }
  }

  .bg {
    tr {
      width: 80%;

      td {
        width: 150px;
        text-align: center;
        border: 1px solid black;
        padding: 10px 10px 10px 10px;
      }
    }
  }

  .last-tit {
    position: absolute;
    bottom: 0;
    display: flex;

    span {
      text-align: center;
      width: 100px;
      display: block;
    }
  }

  .left-cent {
    flex: 1;
    padding-left: 20px;
    padding-right: 20px;

    .ant-form {
      padding-top: 5px;
      display: flex;

      .ant-btn {
        margin-top: 3px;
      }
    }

    .listinfor {
      border: 1px solid #dddddd;
      overflow: hidden;

      .ant-table-wrapper {
        width: 100%;
      }

      .ant-pagination {
        margin-left: 350px;
      }
    }
  }

  .right-cent {
    flex: 1;
    padding: 20px;

    .mx-top {
      margin: 18px 0 18px 0;
      overflow: scroll;

      .ant-table-wrapper {
        width: 100%;

        .ant-table-row {
          height: 80px;
        }
      }
    }

    .mx-top2 {
      margin: 18px 0 18px 0;
      overflow: scroll;

      .ant-table-wrapper {
        width: 135%;

        .ant-table-row {
          height: 80px;
        }
      }
    }
  }

  .mx-center {
    border: 1px solid #aaaaaa;
    padding: 15px;
    display: flex;
    margin-top: 10px;

    .let {
      display: flex;
      flex: 1;
    }

    .cent {
      display: flex;
      flex: 1;
    }

    .rig {
      display: flex;
      flex: 1;
    }
  }

  .mx-bot {
    border: 1px solid #aaaaaa;
    padding: 2px 10px 10px 10px;
    margin-top: 10px;

    .mx-infor {
      margin-top: 10px;
      display: flex;

      .let {
        display: flex;
        flex: 1;
        line-height: 30px;
      }

      .cent {
        display: flex;
        flex: 1;
        line-height: 30px;
      }

      .rig {
        display: flex;
        line-height: 30px;

        .tit {
          width: 70px;
        }

        .ant-input {
          width: 120px
        }
      }
    }

    .bzinfor {
      display: flex;

      .tit {
        width: 70px;
      }

      .ant-input {
        height: 100px;
      }
    }

    .payment {
      margin-top: 10px;
      display: flex;

      .pay-let {
        display: flex;
        flex: 1;

        .ant-select {
          width: 150px;
          margin-left: 5px;
        }
      }

      .pay-cen {
        flex: 1;
        padding-top: 5px;

        span {
          color: red;
        }
      }

      .pay-but {
        flex: 0.7;
        display: flex;
        justify-content: right;

        .ant-btn {
          border-radius: 15px;
        }

      }
    }
  }
}

/deep/ .ant-table-placeholder {
  .ant-empty-normal {
    margin: 0;

    .ant-empty-image {
      margin-bottom: 5px;
      height: 20px;

      .ant-empty-description {
        font-size: 10px;
      }
    }
  }
}
</style>